<template>
  <!-- 客服查询 -->
  <Card style="height:800px">
    <header>
        <Row>
          <Form  inline>
            <FormItem >
              <Upload ref="upload" :on-success="uploadSuccess" :on-error="uploadFail"  type="drag" :action="uploadUrl" :show-upload-list="false" name="file">
                <Button type="primary">导入</Button>
              </Upload>
            </FormItem>
            </br>
            <FormItem label="成功条数:" >

            </FormItem>
            </br>
            <FormItem label="失败条数:" >

            </FormItem>
            </br>
            <FormItem label="失败记录:" >

            </FormItem>
          </Form>
        </Row>
    </header>
    <Content style="margin-top:20px;">
      <Table  border :columns="tableColumns" :data="tableDatas"></Table>
    </Content>
    <div style="text-align:center;width:50%;margin:100px auto;">
      <Page :total="queryCondition.totalPage" :current="queryCondition.currentPage" :page-size="queryCondition.pageSize" show-elevator show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
    </div>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      uploadUrl: this.$appContext.marvels_core_loanapply + 'loanApply/customerservice/fraudulentDataImport/service/fraudulentDataUpload',
      tableColumns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '状态',
          key: 'custName',
          render: (h, params) => {

          }
        },
        {
          title: '来源',
          key: 'custIdCard'
        },
        {
          title: '申请编号',
          key: 'loanId'
        },
        {
          title: '客户姓名',
          key: 'custName'
        },
        {
          title: '证件号码',
          key: 'custCardNo'
        },
        {
          title: '手机号码',
          key: 'custMobile'
        }
      ],
      tableDatas: [],
      queryCondition: {
        totalPage: 0,
        currentPage: 1,
        pageSize: 20
      },
      uploadData: {
        successCount: '',
        failCount: '',
        failRecordList: []
      }

    }
  },
  methods: {
    uploadSuccess (response) {
      var code = response.code
      var message = response.message
      if (code !== 'success') {
        this.$Message.warning(message)
        return
      }
      var data = response.data
      this.uploadData.successCount = data.successCout
      this.uploadData.failCount = 0
      this.uploadData.failRecordList = []
    },
    uploadFail (error) {
      this.$Message.warning(error.message)
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.queryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.queryCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_loanapply + 'loanApply/customerservice/fraudulentDataImport/service/fraudulentDataList', this.queryCondition).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.listInfoData = data.data.list
        vm.queryCondition.total = data.data.total
      }).catch(er => {

      })
    }
  },
  created: function () {
    this.$ajax = this.$util.ajax()
    this.listQuery()
  }
}
</script>
